import pinsListContentLess from "./pinsList.module.less";
import PinsItem from "@/components/pinsItem/pinsItem";
import { GetPinsListApi } from "@/http/api/pin";
import { Skeleton } from "antd";
import { useEffect, useState, forwardRef, useImperativeHandle } from "react";
const PinsList = forwardRef((props, ref) => {
  const [pageNum, setPageNum] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [pinsList, setPinsList] = useState<any[]>([]);
  const GetPinsList = async () => {
    const params = {
      pageNum: pageNum,
      pageSize: pageSize,
    };
    const res: any = await GetPinsListApi(params);
    console.log("获取沸点列表", res);
    if (res.status === 0) {
      setPinsList(res.data);
    }
  };

  useEffect(() => {
    GetPinsList();
  }, []);

  useImperativeHandle(ref, () => ({
    GetPinsList,
  }));
  return (
    <>
      <div className={pinsListContentLess.pinsListContent}>
        {/*  <div className="skeletonContent">
          <Skeleton />
        </div> */}
        <div className="listContent">
          {pinsList.map((item: any) => {
            return <PinsItem key={item.PinId} item={item} />;
          })}
        </div>
      </div>
    </>
  );
});

export default PinsList;
